@extends('admin.index.layout')

@section('title', $title)

@section('content')
    
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                商品管理
                <small>商品图片添加</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> 主页</a></li>
                <li><a href="#">商品管理</a></li>
                <li class="active">商品图片添加</li>
            </ol>
        </section>

        <!-- Main content -->
        <section class="content">
            <div class="row">
                <!-- left column -->
                <div class="col-md-12">
                    <!-- general form elements -->
                    <div class="box box-primary">
                        <div class="box-header with-border">
                            <h3 class="box-title">快速添加图片</h3>
                        </div><!-- /.box-header -->
                        <!-- form start -->
                        <form role="form" action="{{url('/admin/shop/imgs')}}/{{$gid}}" method="post" enctype="multipart/form-data">
                            <div class="box-body">
                            
                            {{ csrf_field() }}
                                <div class="row">
                                    <div class="form-group col-md-3">
                                        <label for="exampleInputName">商品名</label>
                                        <input name="gname" value="{{$gname}}" type="text" class="form-control" id="exampleInputName"
                                               placeholder="商品名" disabled="ture">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group col-md-3">
                                        <label>是否为预览图</label>
                                        <select name="small" class="form-control">
                                            <option value="1">是</option>
                                            <option value="0">否</option>
                                        </select>       
                                    </div>
                                </div>
                                
                                <div class="form-group">
                                    <label for="exampleInputEmail1">{{$photo ? '已存在图片':'还没有上传图片'}}</label>
                                    <!-- <input type="hidden" name="pic" value=""> -->
                                    @foreach($photo as $p)
                                    <img id="{{$p -> id}}" width='500' src="/uploads/gPhoto/{{$p -> photo}}">
                                    @endforeach
                                </div>
                                
                                <div class="row">
                                    <div class="form-group col-md-4">
                                        <label for="exampleInputFile">图片上传</label>
                                        <p id="demo_result"></p>
                                        <input type="file" id="exampleInputFile" name="photo">
                                        <p class="help-block">请上传商品图片</p>
                                    </div>
                                </div>
                            
                           
                            </div><!-- /.box-body -->

                            <div class="box-footer">
                                <button type="submit" class="btn btn-primary">提交</button>
                                <button type="reset" class="btn btn-default">重置</button>
                            </div>

                        </div>   
                      </form>
                    </div><!-- /.box -->

                  

              

                

                </div><!--/.col (left) -->
                <!-- right column -->
     </div>
        </div>
        </div>

     </div>

        </div>
        </div>
    <script type="text/javascript">
        window.onload = function()
        {  
             //预览
            var result = document.getElementById("demo_result");
            var input = document.getElementById("exampleInputFile");

            if(typeof FileReader === 'undefined'){
                result.innerHTML = "<p class='warn'>抱歉，你的浏览器不支持 FileReader</p>";
                input.setAttribute('disabled','disabled');
            }else{
                input.addEventListener('change',readFile,false);
            }
            
            function readFile(){
                var file = this.files[0];
                if(!/image\/\w+/.test(file.type)){
                    alert("请确保文件为图像类型");
                    return false;
                }
                var reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = function(e){
                    result.innerHTML = '<img height="100px" src="'+this.result+'" alt=""/>'
                }
            }
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            // alert($);
            $('img').on('dblclick',function()
            {
                var t = $(this);
                var id = $(this).attr('id');
                // alert(id);
                $.ajax({
                    url:"{{asset('admin/shop/ajaxDelete')}}",
                    type:"GET",
                    data:{id:id},
                    success:function(data)
                    {
                        if(data == 1)
                        {
                            t.remove();
                        }else if(data == 0)
                        {
                            alert('删除失败');
                        }
                    },
                    error:function()
                    {
                        alert(222);
                    }
                })
            })
        }
    </script>

@endsection